<template>
  <div class="carouselitem-container" ref="carouselitemContainer" @mousemove="handleMousemove" @mouseleave="handleMouseleave">
    <div class="carousel-img" ref="carouselitemImg" :style="{transform:`translate(${carouselitemImgStyleLeft}px)`}">
      <ImageLoader @allEnd="showText" :src="carouselSrc" :placeholder="carouselPlaceholder"></ImageLoader>
    </div>
    <div class="title" ref="carouselTitle">{{carouselTitle}}</div>
    <div class="description" ref="carouselDescription">{{carouselDescription}}</div>
  </div>
</template>

<script>
import ImageLoader from "@/components/imageLoader"
export default {
  data(){
    return {
      carouselTitleWidth:0,
      carouselDescriptionWidth:0,

      // carouselitemImg该标签定位样式数据
      carouselitemImgStyleTop:0,
      carouselitemImgStyleLeft:0,
      // carouselitemImg该标签宽高数据
      carouselitemImgWidth:0,
      carouselitemImgHeight:0,

      // carouselitemContainer该标签宽高数据
      carouselitemContainerWidth:0,
      carouselitemContainerheight:0,

      // 鼠标距离carouselitemContainer标签左边界的水平距离、上边界的垂直距离
      mouseX:0,
      mouseY:0,
    }
  },
  created(){
    
  },
  computed:{
    handleProsition(){
      return `translate(${this.carouselitemImgStyleLeft} + 'px', ${this.carouselitemImgStyleTop} + 'px')`
    }
  },
  mounted(){
    this.carouselTitleWidth = parseInt(getComputedStyle(this.$refs.carouselTitle).width);
    
    this.carouselDescriptionWidth = parseInt(getComputedStyle(this.$refs.carouselDescription).width);
    console.log(this.carouselTitleWidth, this.carouselDescriptionWidth)

    // 获取carouselitemImg该标签宽高数据
    this.carouselitemImgWidth = this.$refs.carouselitemImg.clientWidth;
    this.carouselitemImgHeight = this.$refs.carouselitemImg.clientHeight;

    // 获取carouselitemContainer该标签宽高数据
    this.carouselitemContainerWidth = this.$refs.carouselitemContainer.clientWidth;
    this.carouselitemContainerHeight = this.$refs.carouselitemContainer.clientHeight;

    // 初始化carouselitemImg该标签定位样式数据（carouselitemImg标签中心点和carouselitemContainerWidth标签中心点对齐）
    // this.handleMouseleave()

    // 初始化鼠标位置处于carouselitemContainerWidth标签中心点
    this.mouseX = this.carouselitemContainerWidth / 2;
    this.mouseY = this.carouselitemContainerHeight / 2;
    
    // 当窗口大小发生改变时，更新carouselitemContainer、carouselitemImg多个标签宽高数据
    window.addEventListener('resize', this.getLabelsSize)
  },
  destroyed(){
    // 组件删除后，清除绑定在window上事件，避免影响下一组件效果
    window.removeEventListener('resize', this.getLabelsSize)
  },
  methods:{
    handleMouseleave(){
      // 初始化carouselitemImg该标签定位样式数据（carouselitemImg标签中心点和carouselitemContainerWidth标签中心点对齐）
      this.carouselitemImgStyleTop = -(this.carouselitemImgWidth - this.carouselitemContainerWidth) / 2;
      this.carouselitemImgStyleLeft = -(this.carouselitemImgHeight - this.carouselitemContainerHeight) / 2;
    },
    // 更新carouselitemContainer、carouselitemImg多个标签宽高数据
    getLabelsSize(){
      // 获取carouselitemImg该标签宽高数据
      this.carouselitemImgWidth = this.$refs.carouselitemImg.clientWidth;
      this.carouselitemImgHeight = this.$refs.carouselitemImg.clientHeight;

      // 获取carouselitemContainer该标签宽高数据
      this.carouselitemContainerWidth = this.$refs.carouselitemContainer.clientWidth;
      this.carouselitemContainerHeight = this.$refs.carouselitemContainer.clientHeight;
    },
    // 获取鼠标距离carouselitemContainer标签左边界的水平距离、上边界的垂直距离
    handleMousemove(e){
      const rect = this.$refs.carouselitemContainer.getBoundingClientRect();

      // 鼠标距离carouselitemContainer标签左边界的水平距离 = 鼠标距离页面左边界的水平距离 - carouselitemContainer标签距离页面左边界的水平距离
      this.mouseX = e.clientX - rect.left;
      this.mouseY = e.clientY - rect.top;

      // 更新CarouselitemImg标签样式top、left数据
      this.updateCarouselitemImgStylePositionData()
    },
    // 更新CarouselitemImg标签样式top、left数据
    updateCarouselitemImgStylePositionData(){
      
      this.carouselitemImgStyleLeft = -((this.carouselitemImgWidth - this.carouselitemContainerWidth) / this.carouselitemContainerWidth) * this.mouseX
      this.carouselitemImgStyleTop = -(this.carouselitemImgHeight - this.carouselitemContainerHeight) / this.carouselitemContainerHeight * this.mouseY
      
    },
    showText(){
      this.$refs.carouselTitle.style.opacity = 1;
      this.$refs.carouselTitle.style.width = 0;

      getComputedStyle(this.$refs.carouselTitle).width

      this.$refs.carouselTitle.style.transition = "1s";
      this.$refs.carouselTitle.style.width = this.carouselTitleWidth + "px";








      this.$refs.carouselDescription.style.opacity = 1;
      this.$refs.carouselDescription.style.width = 0;

      getComputedStyle(this.$refs.carouselTitle).width

      this.$refs.carouselDescription.style.transition = "2s 1s";
      this.$refs.carouselDescription.style.width = this.carouselDescriptionWidth + "px";
    }
  },
  props:{
    carouselSrc:{
      type:String,
      required:true,
    },
    carouselPlaceholder:{
      type:String,
      required:true,
    },
    carouselTitle:{
      type:String,
      required:true,  
    },
    carouselDescription:{
      type:String,
      required:true,
    }
  },
  components:{
    ImageLoader
  }
}
</script>

<style scoped lang="less">
@import "~@/styles/var.less";
    .carouselitem-container{
        width:100%;
        height:100%;
        position:relative;
        color:#eee;
        .carousel-img{
          position:absolute;
          z-index:-999;
          top:0px;
          left:0px;
          width:120%;  
          height:120%;
          transition:0.3s;
        }
        .title, .description{
          position:absolute;
          left:50px;
          transform:translateY(-50%);
          z-index:999;
          color:#eee;
          letter-spacing:0.5em;
          text-shadow:1px 0px 0px rgba(0, 0, 0, 0.5), -1px 0px 0px rgba(0, 0, 0, 0.5), 0px 1px 0px rgba(0, 0, 0, 0.5), 0px -1px 0px rgba(0, 0, 0, 0.5);
          overflow:hidden;
          white-space:nowrap;
          opacity:0; //获取两段文字的宽度，最开始不展示文字，做文字渐显效果
        }
        .title{
          font-size:2em;
          top:calc(50% - 40px);
        }
        .description{
          font-size:1.2em;
          top:calc(50% + 20px);
          color:lighten(@gray, 30%);
        }
    }
</style>